<template>
  <div class="blog-home">
    <!-- 引入状态栏组件 -->
    <HeaderBar />
    <!-- 移除原导航栏代码 -->
    <!-- 轮播图 -->
    <h1>我爱玩的游戏</h1>
    <main>
      <div class="slideshow-container">
        <div class="slide">
          <img src="@/assets/1.jpg" alt="Image 1">
        </div>
        <div class="slide">
          <img src="@/assets/2.jpg"  alt="Image 2">
        </div>
        <div class="slide">
          <img src="@/assets/3.jpg"  alt="Image 3">
        </div>
        <div class="slide">
          <img src="@/assets/4.jpg" alt="Image 4">
        </div>
        <div class="slide">
          <img src="@/assets/5.jpg"  alt="Image 5">
        </div>
        <!-- 添加左右切换按钮 -->
        <button class="prev" @click="prevSlide">&lt;</button>
        <button class="next" @click="nextSlide">&gt;</button>
      </div>
    </main>
    <br>
    <br>
    <!-- 引入新组件 -->
    <ArticleList />

    <br>
    <br>
    <br>
    <br>
    <!-- 新增底部状态栏，通过 v-if 控制显示 -->
    <div v-if="showFooter" class="footer-status-bar">
      <!-- 这里可以添加状态栏的内容，例如版权信息等 -->
      <p>© 2025 版权所有————刘雷合  学号：202406110135</p>
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from '../stores/userStore';
import { useRouter } from 'vue-router';
import HeaderBar from '../components/HeaderBar.vue';
import { ref, onMounted, onUnmounted } from 'vue';
import ArticleList from '../components/ArticleList.vue'; // 引入新组件

const userStore = useUserStore();
const router = useRouter();

const logout = () => {
  userStore.logout();
  router.push('/login');
};

const currentSlide = ref(0);
const slides = ref([]);
const showFooter = ref(false);

onMounted(() => {
  slides.value = document.querySelectorAll('.slide');
  showSlide(currentSlide.value);
  setInterval(nextSlide, 5000); // 每 4 秒切换一张幻灯片

  window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});

const showSlide = (index) => {
  slides.value.forEach((slide, i) => {
    if (i === index) {
      slide.classList.add('active');
    } else {
      slide.classList.remove('active');
    }
  });
};

const nextSlide = () => {
  currentSlide.value++;
  if (currentSlide.value >= slides.value.length) {
    currentSlide.value = 0;
  }
  showSlide(currentSlide.value);
};

const prevSlide = () => {
  currentSlide.value--;
  if (currentSlide.value < 0) {
    currentSlide.value = slides.value.length - 1;
  }
  showSlide(currentSlide.value);
};

const handleScroll = () => {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const windowHeight = window.innerHeight;
  const documentHeight = document.documentElement.scrollHeight;

  if (scrollTop + windowHeight >= documentHeight) {
    showFooter.value = true;
  } else {
    showFooter.value = false;
  }
};
</script>

<style scoped>
.carousel {
  height: 300px; 
  background-color: #e0e0e0;
  margin-bottom: 20px;
  text-align: center; 
  display: flex;
  justify-content: center;
  align-items: center;
}

.article-list {
  text-align: center; /* 让文本内容居中 */
  width: 80%; /* 设置宽度，可根据需要调整 */
  margin: 0 auto; /* 让容器水平居中 */
}

.article-list ul {
  list-style-type: none;
  padding: 0;
}

.article-list li {
  margin-bottom: 10px;
}
main {
  max-width: 80%;
  margin: 0 auto;
  padding: 40px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.slideshow-container {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease;
}

.slide.active {
  opacity: 1;
}

.slide img {
  width: 70%;
  height: 100%;
  object-fit: cover;
}

/* 修改按钮样式，确保左按钮在最左边 */
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  user-select: none;
  background-color: rgba(0,0,0,0.3);
  border: none;
  cursor: pointer;
}

.prev {
  left: 0;
  border-radius: 0 3px 3px 0;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.wukong-box {
  border: 1px solid #ccc; /* 创建方框 */
  padding: 10px;
  margin: 20px auto;
  max-width: 300px; /* 限制方框最大宽度 */
  text-align: center;
}

.wukong-image {
  max-width: 100%; /* 图片宽度最大为方框宽度 */
  height: auto; /* 保持图片比例 */
  display: block; /* 去除图片下方的空白 */
  margin: 0 auto; /* 图片居中 */
}
.combined-container {
  border: 1px solid #eee; /* 可根据需求调整边框样式 */
  padding: 20px;
  border-radius: 8px;
}

/* 新增底部状态栏样式 */
.footer-status-bar {
  background-color: rgb(232, 235, 232); /* 设置浅绿色背景 */
  text-align: center; /* 文字居中 */
  padding: 10px; /* 设置内边距 */
  width: 100%; /* 宽度占满屏幕 */
  position: fixed; /* 固定在底部 */
  bottom: 0; /* 距离底部为 0 */
  left: 0; /* 距离左边为 0 */
}

.footer-status-bar p {
  margin: 0; /* 去除段落默认外边距 */
  color: white; /* 设置文字颜色 */
}
</style>